/**
CSS3 完全向后兼容，因此您不必改变现有的设计。浏览器通常支持 CSS2。

 CSS3模块
 其中最重要的 CSS3 模块包括：


    - 选择器
    - 框模型
    - 背景和边框
    - 文本效果
    - 2D/3D转换
    - 动画
    - 多列布局
    - 用户界面

====================================================
    CSS3 标准

    W3C 仍然在对 CSS3 规范进行开发。
    不过，现代浏览器已经实现了相当多的 CSS3 属性。

=====================================================
    CSS3 边框

    通过CSS3, 您能够创建建圆角边框，向矩形添加阴影，使用图片绘制边框 - 并且不需
    使用设计软件，比如 PhotoShop.

    在本章中，您将学到以下边框属性：
    - border-radius
    - box-shadow
    - border-image

    其中 IE 不支持 boder-image
    Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。
    Firefox 、 Chrome 以及Safari支持所有新的边框属性。
    注释：对于border-image,Safari 5以及更老的版本需要前缀 -webkit-.
    Opera 支持 border-radius 和 box-shadow属性，得是对于 border-imgage需要前缀 -o-.

    =============================================================================================

    CSS3背景

    CSS3包含多个新的背景属性，它们提供了对背景更强大的控制。
    在本章，您将学到以下背景属性：

    background-size
    background-origin

    您也将学到如何使用多重背景图片。

    background-size 属性

    background-size 属生规定背景图片的尺寸决定的。在CSS3中，可以规定背景图片的尺寸，这就允许我们在不同的环境中
    重复使用背景图片。

    您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。


    background-origin属性
    background-origin 属性规定背景图片的定位区域。

    背景图片可以放置于 content-box、padding-box 或者border-box区域。

==================================================================================================================
CSS3多重背景图片

CSS3允许您为元素使用多个背景图像。

新的背景属性

background-clip  规定背景的绘制区域。
background-origin 规定背景图片的定位区域。
background-size  规定背景图片的尺寸。

=====================================================================================================================

CSS3文本效果

CSS3包含多个新的文本特性。
在本章中，您将学到如下文本属性：

text-shadow
word-wrap

浏览器支持：Internet Explorer 10、Firefox、Chrome、Safari以及Opera支持text-shadow属性。
所有主流浏览器都支持word-wrap属性。

注释：Internet Explorer 9 以及更早的版本，不支持text-shadow属性。



CSS3文本阴影
在CSS3中，text-shadow可向文本应用阴影。

您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：


CSS3自动换行
单词太长的话就可能无法超出某个区域：

在CSS3中，word-wrap 属性允许您允许文本强制文本进行换行 -即使这意味着会对单词进行拆分：

新的文本属性

hanging-punctuation	规定标点字符是否位于线框之外。	3
punctuation-trim	规定是否对标点字符进行修剪。	3
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。	3
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。	3
text-justify	规定当 text-align 设置为 "justify" 时所使用的对齐方法。	3
text-outline	规定文本的轮廓。	3
text-overflow	规定当文本溢出包含元素时发生的事情。	3
text-shadow	向文本添加阴影。	3
text-wrap	规定文本的换行规则。	3
word-break	规定非中日韩文本的换行规则。	3
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。	3

=================================================================================================
通过CSS3，Web设计师再也不必被迫使用“web-safe”字体了。

CSS3 @font-face规则
在CSS3之前，web设计师必须使用已在用户计算机安装好的字体。
通过CSS3,web设计师可以使用他们喜欢的任意字体。

当您您找到或购买到希望使用的字体时，可将该字体文件存放到web服务器上，它会在需要时被自动下载到用户
的计算机上。您“自已的”的字体是在CSS3@font-face规则定义的。

浏览器支持

Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。

注释：Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

使用您需要的字体
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：


============================================================================================================
CSS3转换

通过CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

它如何工作?
转换是使用元素改变形状、尺寸和位置的一种效果。
您可以使用2D或3D转换来转换您的元素。

transform

Internet Explorer 10、 Firefox 以及Opera支持 transform属性。

Chrome 和 Safari 需要前缀 -webkit-.
注释：internet Explorer 9 需要前缀 -ms-.

2D 转换
在本章中，您将学到如下2D转换方法：
 translate()
 rotate()
 scale()
 skew()
 matrix()


translate() 方法
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：


值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。




=======================================================================================================

rotate() 方法
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转


值 rotate(30deg) 把元素顺时针旋转 30 度。


scale() 方法
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：


值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍


skew() 方法
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。


==============================================================================================================
3D 转换
CSS3允许您使用3D转换来对元素进行格式化。
 在本章中，您将学到其中的一些3D转换方法：

 rotateX()
 rotateY()


它如何工作？
转换是使元素改变形状、尺寸和位置的一种效果。
您可以使用 2D 或 3D 转换来转换您的元素。

浏览器支持

Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不支持 3D 转换（它只支持 2D 转换）


rotateX() 方法
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。


rotateX() 方法
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。
实例



============================================================================================================
CSS3过渡

通过CSS3,我们可以在不使用Flash动画或javaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
请把鼠标移动到下面的元素上：

浏览器支持

internet Explorer 10 Firefox, Chrome 以及Opera支持transition属性。

Safari需要前缀 -webkit-.

注释：Internet Explorer 9 以及更早的版本，不支持transition属性。
注释：Chrome25 以及更早的版本，需要前缀 -webkit-.


它如何工作？
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容 ：

-规定您希望把效果添加到哪个CSS属性上
-规定效果的时长

实例：
应用于宽度属性的过渡效果，时长为 2 秒：

注释：如果时长未规定，则不会有过渡效果，因为默认值是 0。
效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时：


==========================================================================================================
CSS3动画

CSS3,我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScipts.


CSS3@keyframes规则
要创建CSS3动画，你将不得不了解@keyframes规则。
@keyframes规则是创建动画。@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在-webkit-，-ms-或-moz-前的数字为支持该前缀属性的第一个浏览器版本号。


CSS3动画
当在@keyframes创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选 择器：

规定动画的名称
规定动画的时长

注意：您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值 是0.

CSS3动画是什么？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词“from”和“to”,等同于0%和100%。
0%是动画的开始，100%是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义0%和100%选择器。












 */


